<template>
  <el-dialog
    v-model="dialogVisible"
    :title="`车队车辆列表 - ${fleetName}`"
    width="90%"
    :before-close="handleClose"
    destroy-on-close
  >
    <div class="vehicle-list-popup">
      <el-card>
        <!-- <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">车辆列表</span>
            <el-button type="primary" :icon="CirclePlus" @click="openVehicleForm('新增车辆')">
              新增车辆
            </el-button>
          </div>
        </template> -->
        
        <ProTable
          ref="proTableRef"
          :columns="columns"
          :search-columns="searchColumns"
          :request-api="getTableList"
          :init-param="{ fleetId: fleetId }"
          row-key="id"
        >
          <template #operation="{ row }">
            <el-button
              type="primary"
              link
              :icon="EditPen"
              @click="openVehicleForm('编辑车辆', row)"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              link
              :icon="Delete"
              @click="deleteVehicle(row)"
            >
              删除
            </el-button>
          </template>
        </ProTable>
      </el-card>
      
      <!-- 车辆表单 -->
      <VehicleForm ref="vehicleFormRef" />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { CirclePlus, EditPen, Delete } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import ProTable from '@/components/ProTable/index.vue';
import VehicleForm from '@/views/dept/deptList/components/VehicleForm.vue';
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface';

defineOptions({
  name: 'VehicleListPopup'
});

const dialogVisible = ref(false);
const fleetId = ref<number>(0);
const fleetName = ref<string>('');

const proTableRef = ref<ProTableInstance>();
const vehicleFormRef = ref<InstanceType<typeof VehicleForm>>();

// 表格配置项
const columns: ColumnProps<any>[] = [
  { prop: 'vehicleNumber', label: '车辆编号', width: 150 },
  { prop: 'plateNumber', label: '车牌号', width: 150 },
  { prop: 'brand', label: '品牌', width: 120 },
  { prop: 'model', label: '型号', width: 120 },
  { prop: 'createTime', label: '创建时间' },
  { prop: 'updateTime', label: '更新时间', width: 180 },
  { prop: 'operation', label: '操作', width: 160, fixed: 'right' }
];

// 搜索条件项
const searchColumns: SearchProps[] = [
  { prop: 'vehicleNumber', label: '车辆编号', el: 'input' },
  { prop: 'plateNumber', label: '车牌号', el: 'input' }
];

// 获取表格列表 (模拟数据)
const getTableList = (params: any) => {
  // 这里应该调用实际的API
  // 暂时返回模拟数据
  return Promise.resolve({
    data: {
      current: 1,
      limit: 10,
      totalPage: 1,
      total: 0,
      rows: []
    }
  });
};

// 接收父组件参数
const acceptParams = (params: any) => {
  fleetId.value = params.fleetId;
  fleetName.value = params.fleetName || '';
  dialogVisible.value = true;
};

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
};

// 打开车辆表单（新增/编辑）
const openVehicleForm = (title: string, row: any = {}) => {
  const params = {
    title,
    row: { ...row },
    fleetId: fleetId.value,
    getTableList: proTableRef.value?.getTableList
  };
  vehicleFormRef.value?.acceptParams(params);
};

// 删除车辆
const deleteVehicle = async (row: any) => {
  ElMessageBox.confirm(`确定要删除车辆【${row.vehicleNumber}】吗？`, '提示', {
    type: 'warning'
  }).then(async () => {
    try {
      // 这里应该调用实际的删除API
      console.log('删除车辆:', row.id);
      proTableRef.value?.getTableList();
    } catch (error) {
      console.error('删除车辆失败:', error);
      ElMessage.error('删除车辆失败');
    }
  }).catch(() => {
    // 取消删除
  });
};

defineExpose({
  acceptParams
});
</script>

<style scoped lang="scss">
.vehicle-list-popup {
  padding: 20px;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.font-medium {
  font-weight: 500;
}
</style>